<template>
  <el-card >
    <el-row :gutter="500" >
      <el-col :span="12" >
        <el-input v-model="search" placeholder="搜索课程">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </el-col>
<!--      <el-button type="primary" size="mini" @click="courseAdd">添 加</el-button>-->
    </el-row>

<!--    <el-dialog title="添加课程" :visible.sync="dialogFormVisible" width="30%" size="small">-->
<!--      <el-form label-width="120px">-->
<!--        <el-form-item label="课程名称">-->
<!--          <el-input v-model="form.name" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->

<!--      </el-form>-->

<!--      <div slot="footer" class="dialog-footer">-->
<!--        <el-button @click="dialogFormVisible = false">取 消</el-button>-->
<!--        <el-button type="primary" @click="save">确 定</el-button>-->
<!--      </div>-->
<!--    </el-dialog>-->

    <el-row :gutter="20" style="margin-top: 10px;margin-right: 5px">
      <el-col :span="8" v-for="(item,index) in filterDataList.slice((currentPage-1)*sizePage,currentPage*sizePage)" :key="index">
        <el-card class="card_container"  @click.native="showDetail(item)" >
          <el-row>
            <el-col :span="22">
              <el-row class="card_left_top">
                {{ item.courseName }}
              </el-row>
              <el-row class="card_left_bottom">
                <el-col :span="2">
                  <img class="card_img" :src="avatar" alt="用户头像">
                </el-col>
                <el-col :span="7">
                  {{ item.teacherName }}
                </el-col>
                <el-col :span="2">
                  <i style="font-size: 20px" class="el-icon-s-home"/>
                </el-col>
                <el-col :span="12">
                  {{ item.courseClass }}
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="2">
              <el-dropdown>
                <i class="el-icon-more-outline" style="color: #ffffff;font-size: 25px"></i>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>置顶</el-dropdown-item>
                  <el-dropdown-item>删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <el-row style="text-align: center;margin-top: 10px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-sizes="[9, 18, 27]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="filterDataList.length">
      </el-pagination>
    </el-row>
  </el-card>
</template>

<script>
  import {queryCourseList,ClassAddFirst,FindClassId,addSecond,addTwo} from "@/api/teacher/course";
  import { getUserProfile } from "@/api/system/user";
  import {Now} from "@/api/student/topic"
  import {queryCourseListByStudent} from "../../api/teacher/course";
  export default {
    name: "course",
    data(){
      return {
        visible: false,
        form:{},
        form1:{},
        dialogFormVisible: false,
        courseList: [],
        avatar: '',
        filterDataList: [],
        currentPage: 1,
        sizePage: 9,
        search: '',
        originList: [],
        reme:''
      }
    },

    mounted() {
      this.avatar = this.$store.state.user.avatar

      getUserProfile().then(response =>{
        this.user = response.data;
        queryCourseListByStudent(this.user.userName).then(result => {
          if (result!==null){
            this.originList = result
            for (let i = 0;i<result.length;i++){
              if (result[i].sclass !== null){
                this.courseList.push({
                  id: result[i].id,
                  courseName: result[i].name,
                  teacherName: result[i].teacher.nickname,
                  courseClass: result[i].sclass.name
                })
              }else {
                this.courseList.push({
                  id: result[i].id,
                  courseName: result[i].name,
                  teacherName: result[i].teacher.nickname,
                  courseClass: '暂无选课信息'
                })
              }
            }
          }
          this.searchResource(this.search,this.courseList)
        })

      })
    },
    methods: {
      re(){
        this.avatar = this.$store.state.user.avatar

        getUserProfile().then(response =>{
          this.user = response.data;
          queryCourseList(this.user.userName).then(result => {
            if (result!==null){
              this.originList = result
              for (let i = 0;i<result.length;i++){
                if (result[i].sclass !== null){
                  this.courseList.push({
                    id: result[i].id,
                    courseName: result[i].name,
                    teacherName: result[i].teacher.nickname,
                    courseClass: result[i].sclass.name
                  })
                }else {
                  this.courseList.push({
                    id: result[i].id,
                    courseName: result[i].name,
                    teacherName: result[i].teacher.nickname,
                    courseClass: '暂无选课信息'
                  })
                }
              }
            }
            this.searchResource(this.search,this.courseList)
          })

        })
      },
      courseAdd(){
        this.dialogFormVisible = true
        this.form={}

      },
      save(){
        ClassAddFirst(this.form).then(response=>{

          if (response.code === 200){
            this.$message.success("添加课程成功")
            this.dialogFormVisible = false
            FindClassId(this.form.name).then(response=>{
              this.reme = response[0].id
              this.form1.name = this.form.name
              this.form1.classId = this.reme
              this.form1.teacherId = this.user.userName
              addTwo(this.form1).then(response=>{
                this.re();
              })
            })
          }else {
            this.$message.error("添加课程失败")
          }
        })
      },
      handleSizeChange(val) {
        this.sizePage = val
      },
      handleCurrentChange(val) {
        this.currentPage = val
      },
      searchResource(search,data) {
        this.currentPage = 1; //将当前页设置为1，确保每次都是从第一页开始搜
        let filterKeywords = search.trim();
        this.filterDataList = data.filter(item => { //过滤全部数据
          if (item.courseName.includes(filterKeywords)) {//将符合条件的内容赋给filterDataShow
            return item
          }
        })
      },
      showDetail(item){
        let v = ''
        for (let i=0;i<this.originList.length;i++){
          if (this.originList[i].id === item.id){
            v = this.originList[i]
          }
        }
        this.$router.push({ path:'../student/topic', query:{classId :v.classId}})

      }
    },
    watch: {
      search: {
        handler(){
          this.searchResource(this.search,this.courseList)
        }
      }
    }
  }
</script>

<style scoped>
  .card_container{
    background-image: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);
    height: 120px;
    user-select: none;
    cursor: pointer;
    transition: all 0.3s;/* 上浮这个过程需要的时间 */
  }
  .card_container:hover{
    box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15);/* 鼠标悬浮时盒子出现的阴影 */
    transform: translate(0, -7px);/* 鼠标悬浮时盒子上移10px */
  }
  .card_left_top{
    color: #ffffff;
    font-size: 25px;
  }
  .card_left_bottom{
    color: #ffffff;
    font-size: 15px;
    margin-top: 25px;
  }
  .card_img {
    display: inline-block;
    margin-right: 8px;
    width: 20px;
    height: 20px;
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border: 1px solid #fff;
    box-shadow: 0 0 3px #ccc;
    overflow: hidden;
  }
</style>
